<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>反馈中心 - 雁农冷链平台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../static/sa.css">
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<style>
		.feedback-container {
			padding: 20px;
			background: #f5f5f5;
			min-height: calc(100vh - 40px);
		}
		.feedback-header {
			background: white;
			border-radius: 8px;
			padding: 20px;
			margin-bottom: 20px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			text-align: center;
		}
		.feedback-header h2 {
			margin: 0 0 10px 0;
			color: #333;
		}
		.feedback-header p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		.feedback-tabs {
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			overflow: hidden;
		}
		.tab-header {
			display: flex;
			border-bottom: 1px solid #eee;
		}
		.tab-item {
			flex: 1;
			padding: 15px 20px;
			text-align: center;
			cursor: pointer;
			border-bottom: 3px solid transparent;
			transition: all 0.3s;
			background: #fafafa;
		}
		.tab-item.active {
			color: #409eff;
			border-bottom-color: #409eff;
			background: white;
		}
		.tab-item:hover {
			background: #f0f8ff;
		}
		.tab-content {
			padding: 30px;
		}
		.feedback-form {
			max-width: 800px;
			margin: 0 auto;
		}
		.form-group {
			margin-bottom: 25px;
		}
		.form-group label {
			display: block;
			margin-bottom: 8px;
			color: #333;
			font-weight: 500;
			font-size: 14px;
		}
		.form-group label .required {
			color: #f56c6c;
			margin-left: 2px;
		}
		.form-group input, .form-group select, .form-group textarea {
			width: 100%;
			padding: 12px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 14px;
			transition: border-color 0.3s;
			box-sizing: border-box;
		}
		.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
			border-color: #409eff;
			outline: none;
			box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
		}
		.form-group textarea {
			resize: vertical;
			min-height: 120px;
		}
		.form-row {
			display: flex;
			gap: 20px;
		}
		.form-row .form-group {
			flex: 1;
		}
		.priority-options {
			display: flex;
			gap: 15px;
			margin-top: 8px;
		}
		.priority-option {
			display: flex;
			align-items: center;
			cursor: pointer;
		}
		.priority-option input[type="radio"] {
			width: auto;
			margin-right: 5px;
		}
		.file-upload {
			border: 2px dashed #ddd;
			border-radius: 6px;
			padding: 30px;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s;
		}
		.file-upload:hover {
			border-color: #409eff;
			background: #f8f9ff;
		}
		.file-upload-icon {
			font-size: 48px;
			color: #ccc;
			margin-bottom: 10px;
		}
		.file-upload-text {
			color: #666;
			font-size: 14px;
		}
		.file-list {
			margin-top: 15px;
		}
		.file-item {
			display: flex;
			align-items: center;
			padding: 8px 12px;
			background: #f5f5f5;
			border-radius: 4px;
			margin-bottom: 8px;
		}
		.file-item:last-child {
			margin-bottom: 0;
		}
		.file-icon {
			margin-right: 8px;
			color: #409eff;
		}
		.file-name {
			flex: 1;
			color: #333;
			font-size: 14px;
		}
		.file-remove {
			color: #f56c6c;
			cursor: pointer;
			padding: 2px 5px;
		}
		.file-remove:hover {
			background: #fde2e2;
			border-radius: 2px;
		}
		.submit-btn {
			width: 100%;
			padding: 15px;
			background: #409eff;
			color: white;
			border: none;
			border-radius: 6px;
			font-size: 16px;
			cursor: pointer;
			transition: all 0.3s;
			margin-top: 20px;
		}
		.submit-btn:hover {
			background: #66b1ff;
		}
		.submit-btn:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
		.feedback-list {
			max-width: 800px;
			margin: 0 auto;
		}
		.feedback-item {
			background: #f9f9f9;
			border-radius: 8px;
			padding: 20px;
			margin-bottom: 15px;
			border-left: 4px solid #409eff;
		}
		.feedback-item.status-processing {
			border-left-color: #e6a23c;
		}
		.feedback-item.status-resolved {
			border-left-color: #67c23a;
		}
		.feedback-item.status-closed {
			border-left-color: #909399;
		}
		.feedback-header-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.feedback-title {
			font-weight: bold;
			color: #333;
			font-size: 16px;
		}
		.feedback-status {
			padding: 4px 12px;
			border-radius: 12px;
			font-size: 12px;
			color: white;
		}
		.status-pending { background: #409eff; }
		.status-processing { background: #e6a23c; }
		.status-resolved { background: #67c23a; }
		.status-closed { background: #909399; }
		.feedback-content {
			color: #666;
			line-height: 1.6;
			margin-bottom: 15px;
		}
		.feedback-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			color: #999;
		}
		.feedback-reply {
			margin-top: 15px;
			padding: 15px;
			background: white;
			border-radius: 6px;
			border: 1px solid #eee;
		}
		.reply-header {
			font-weight: bold;
			color: #409eff;
			margin-bottom: 8px;
			font-size: 14px;
		}
		.reply-content {
			color: #333;
			line-height: 1.5;
		}
		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.empty-icon {
			font-size: 64px;
			color: #ddd;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div id="app" class="feedback-container">
		<!-- 页面头部 -->
		<div class="feedback-header">
			<h2>反馈中心</h2>
			<p>您的意见和建议是我们改进服务的重要依据，感谢您的支持！</p>
		</div>
		
		<!-- 标签页 -->
		<div class="feedback-tabs">
			<div class="tab-header">
				<div class="tab-item" :class="{active: activeTab === 'submit'}" @click="activeTab = 'submit'">
					提交反馈
				</div>
				<div class="tab-item" :class="{active: activeTab === 'history'}" @click="activeTab = 'history'">
					我的反馈
				</div>
			</div>
			
			<div class="tab-content">
				<!-- 提交反馈表单 -->
				<div v-if="activeTab === 'submit'" class="feedback-form">
					<form @submit.prevent="submitFeedback">
						<div class="form-row">
							<div class="form-group">
								<label>反馈类型<span class="required">*</span></label>
								<select v-model="feedbackForm.type" required>
									<option value="">请选择反馈类型</option>
									<option value="bug">功能异常</option>
									<option value="feature">功能建议</option>
									<option value="ui">界面优化</option>
									<option value="performance">性能问题</option>
									<option value="other">其他问题</option>
								</select>
							</div>
							<div class="form-group">
								<label>优先级</label>
								<div class="priority-options">
									<label class="priority-option">
										<input type="radio" v-model="feedbackForm.priority" value="low"> 低
									</label>
									<label class="priority-option">
										<input type="radio" v-model="feedbackForm.priority" value="medium"> 中
									</label>
									<label class="priority-option">
										<input type="radio" v-model="feedbackForm.priority" value="high"> 高
									</label>
								</div>
							</div>
						</div>
						
						<div class="form-group">
							<label>反馈标题<span class="required">*</span></label>
							<input type="text" v-model="feedbackForm.title" placeholder="请简要描述您遇到的问题或建议" required>
						</div>
						
						<div class="form-group">
							<label>详细描述<span class="required">*</span></label>
							<textarea v-model="feedbackForm.description" placeholder="请详细描述问题的具体情况、重现步骤或改进建议..." required></textarea>
						</div>
						
						<div class="form-row">
							<div class="form-group">
								<label>联系方式</label>
								<input type="text" v-model="feedbackForm.contact" placeholder="手机号或邮箱（可选）">
							</div>
							<div class="form-group">
								<label>所属模块</label>
								<select v-model="feedbackForm.module">
									<option value="">请选择相关模块</option>
									<option value="consumer">消费者模块</option>
									<option value="supplier">供应商模块</option>
									<option value="logistics">物流企业模块</option>
									<option value="system">系统设置</option>
									<option value="other">其他</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label>附件上传</label>
							<div class="file-upload" @click="$refs.fileInput.click()">
								<div class="file-upload-icon">📎</div>
								<div class="file-upload-text">
									点击上传截图或相关文件<br>
									<small>支持 jpg, png, pdf, doc 格式，单个文件不超过 10MB</small>
								</div>
							</div>
							<input type="file" ref="fileInput" @change="handleFileUpload" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" style="display: none;">
							<div v-if="feedbackForm.files.length > 0" class="file-list">
								<div v-for="(file, index) in feedbackForm.files" :key="index" class="file-item">
									<i class="file-icon el-icon-document"></i>
									<span class="file-name">{{ file.name }}</span>
									<i class="file-remove el-icon-close" @click="removeFile(index)"></i>
								</div>
							</div>
						</div>
						
						<button type="submit" class="submit-btn" :disabled="!isFormValid">提交反馈</button>
					</form>
				</div>
				
				<!-- 反馈历史 -->
				<div v-if="activeTab === 'history'" class="feedback-list">
					<div v-if="feedbackHistory.length === 0" class="empty-state">
						<div class="empty-icon">📝</div>
						<div>暂无反馈记录</div>
					</div>
					<div v-else>
						<div v-for="feedback in feedbackHistory" :key="feedback.id" 
							 class="feedback-item" :class="'status-' + feedback.status">
							<div class="feedback-header-info">
								<div class="feedback-title">{{ feedback.title }}</div>
								<div class="feedback-status" :class="'status-' + feedback.status">
									{{ getStatusText(feedback.status) }}
								</div>
							</div>
							<div class="feedback-content">{{ feedback.description }}</div>
							<div class="feedback-meta">
								<span>类型：{{ getTypeText(feedback.type) }} | 优先级：{{ getPriorityText(feedback.priority) }}</span>
								<span>{{ formatDate(feedback.createTime) }}</span>
							</div>
							<div v-if="feedback.reply" class="feedback-reply">
								<div class="reply-header">官方回复：</div>
								<div class="reply-content">{{ feedback.reply }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					activeTab: 'submit',
					feedbackForm: {
						type: '',
						priority: 'medium',
						title: '',
						description: '',
						contact: '',
						module: '',
						files: []
					},
					feedbackHistory: [
						{
							id: 1,
							type: 'bug',
							priority: 'high',
							title: '物流轨迹页面加载缓慢',
							description: '在查看运输轨迹实时监控页面时，地图加载速度很慢，有时需要等待10秒以上才能显示内容。',
							status: 'resolved',
							createTime: new Date('2024-01-10'),
							reply: '感谢您的反馈！我们已经优化了地图加载逻辑，现在页面加载速度提升了60%以上。请您再次体验，如有问题请随时联系我们。'
						},
						{
							id: 2,
							type: 'feature',
							priority: 'medium',
							title: '希望增加批量导出功能',
							description: '在订单管理页面，希望能够支持批量选择订单并导出为Excel文件，方便数据分析和报表制作。',
							status: 'processing',
							createTime: new Date('2024-01-12'),
							reply: null
						},
						{
							id: 3,
							type: 'ui',
							priority: 'low',
							title: '移动端适配问题',
							description: '在手机浏览器中访问系统时，部分按钮显示不全，建议优化移动端的界面适配。',
							status: 'pending',
							createTime: new Date('2024-01-14'),
							reply: null
						}
					]
				}
			},
			computed: {
				isFormValid() {
					return this.feedbackForm.type && 
						   this.feedbackForm.title.trim() && 
						   this.feedbackForm.description.trim();
				}
			},
			methods: {
				handleFileUpload(event) {
					const files = Array.from(event.target.files);
					files.forEach(file => {
						if (file.size > 10 * 1024 * 1024) {
							this.$message.error(`文件 ${file.name} 超过10MB限制`);
							return;
						}
						this.feedbackForm.files.push(file);
					});
					event.target.value = '';
				},
				removeFile(index) {
					this.feedbackForm.files.splice(index, 1);
				},
				submitFeedback() {
					if (!this.isFormValid) {
						this.$message.error('请填写必填项');
						return;
					}
					
					// 模拟提交
					this.$message.success('反馈提交成功！我们会尽快处理您的反馈。');
					
					// 添加到历史记录
					const newFeedback = {
						id: Date.now(),
						...this.feedbackForm,
						status: 'pending',
						createTime: new Date(),
						reply: null
					};
					this.feedbackHistory.unshift(newFeedback);
					
					// 重置表单
					this.feedbackForm = {
						type: '',
						priority: 'medium',
						title: '',
						description: '',
						contact: '',
						module: '',
						files: []
					};
					
					// 切换到历史记录
					this.activeTab = 'history';
				},
				getStatusText(status) {
					const statusMap = {
						pending: '待处理',
						processing: '处理中',
						resolved: '已解决',
						closed: '已关闭'
					};
					return statusMap[status] || status;
				},
				getTypeText(type) {
					const typeMap = {
						bug: '功能异常',
						feature: '功能建议',
						ui: '界面优化',
						performance: '性能问题',
						other: '其他问题'
					};
					return typeMap[type] || type;
				},
				getPriorityText(priority) {
					const priorityMap = {
						low: '低',
						medium: '中',
						high: '高'
					};
					return priorityMap[priority] || priority;
				},
				formatDate(date) {
					return new Date(date).toLocaleDateString('zh-CN') + ' ' + 
						   new Date(date).toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'});
				}
			}
		});
	</script>
</body>
</html>